import React from "react";
import { url, toplist, songdetail } from "../../api";
import { axiosGet } from "../../axios";
import {inject,observer} from 'mobx-react'
import {withRouter} from 'react-router'

@inject('songlist')@observer
class OfficialList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      songDetail: [],
    };
  }
  componentDidMount() {
    this.getToplist();
  }
  //  获取歌曲详情
  getsongDetail(list) {
    let song = [];
    for (let i = 0; i < list.length; i++) {
      for (let j = 0; j < 8; j++) {
        let id = list[i].trackIds[j].id;
        axiosGet(url, songdetail, "ids=" + id).then((data) => {
          song.push(data.songs[0]);
          this.setState({
            songDetail: song,
          });
        });
      }
    }
  }
  //  获取官方排行榜
  getToplist() {
    for (let i = 0; i < 4; i++) {
      axiosGet(url, toplist, "idx=" + i).then((data) => {
        let list = this.state.list;
        list.push(data.playlist);

        this.setState({
          list: list,
        });
        if (list.length === 4) {
          this.getsongDetail(list);
        }
      });
    }
  }
  //  渲染
  render() {
      let newsong = [],upsong=[],hotsong=[],mysong=[]

    for(let i=0;i<this.state.songDetail.length;i++){
        if(i<8){
           newsong.push(this.state.songDetail[i])
        }else if(i>=8 && i<16){
          upsong.push(this.state.songDetail[i])
        }else if(i>=16 && i<24){
           hotsong.push(this.state.songDetail[i])
        }else if(i>=24 && i<32){
            mysong.push(this.state.songDetail[i])
        }
    }
    return (
        
      <div >
        <h3 className='title'>官方榜</h3>
        <div className="official-list">
        {this.state.list &&
          this.state.list.map((item, index) => {
            return (
              <div key={index} className="item" onClick={()=>{
                this.props.songlist.setSonglistDetail(item)
                this.props.history.push('/songListDetail')
                }}>
                <div className="item-img">
                  <img src={item.coverImgUrl} alt=""></img>
                </div>
                <div className="item-list">
                    {index ===0 && newsong&&
                    newsong.map((items,indexs)=>{
                        return(
                        <p key={indexs} className={indexs%2===1 ? 'item-line':'none'}><span>{'0'+(indexs+1)}</span><span>{items.name}</span></p>
                        )
                    })}
                    {index ===1 && upsong &&
                    upsong.map((items,indexs)=>{
                        return(
                        <p key={indexs} className={indexs%2===1 ? 'item-line':'none'}><span>{'0'+(indexs+1)}</span><span>{items.name}</span></p>
                        )
                    })}
                    {index ===2 && hotsong &&
                    hotsong.map((items,indexs)=>{
                        return(
                        <p key={indexs} className={indexs%2===1 ? 'item-line':'none'}><span>{'0'+(indexs+1)}</span><span>{items.name}</span></p>
                        )
                    })}
                    {index ===3 && mysong &&
                    mysong.map((items,indexs)=>{
                        return(
                        <p key={indexs} className={indexs%2===1 ? 'item-line':'none'}><span>{'0'+(indexs+1)}</span><span>{items.name}</span></p>
                        )
                    })}
                </div>
              </div>
            );
          })}
          </div>
      </div>
    );
  }
}
export default withRouter(OfficialList);
